<template>
    <div class="main_letop">
        <!-- 上左 -->
        <div class="top_left">
            <div class="top_zuo">
                <img src="@/assets/home.png">
            </div>
            <div class="top_you">
                <div class="you_top">
                    <div style="color: #fff; font-size: 16px;">本期活动GMX</div>
                    <div style="color: #fff; font-size: 22px; margin-top: 5px; margin-bottom: 10px;">
                        1523.53W
                    </div>

                </div>
                <div class="you_bot">
                    <div style="font-size: 16px; color: #fff;">
                        <div>类目一</div>
                        <div style="margin-top: 5px;">53W</div>
                    </div>
                    <div style="font-size: 16px; color: #fff;">
                        <div>类目一</div>
                        <div style="margin-top: 5px;">53W</div>
                    </div>
                    <div style="font-size: 16px; color: #fff;">
                        <div>类目一</div>
                        <div style="margin-top: 5px;">53W</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 上右 -->
        <div class="top_right">

            <div class="right_zuo">

                <div class="zuo_top">

                    <div class="zuo_top_left">
                        <img src="@/assets/icon1.png">
                    </div>

                    <div class="zuo_top_right">
                        <div style="margin-top: 15px;">
                            <span style="font-weight: bold; font-size: 18px;">934.7w</span>
                            <span style=" font-weight: bold;color: #1EBD5E; margin-left: 5px;">29.74</span>
                        </div>
                        <div style="margin-top: 10px;color: #B2B2B2;">今日DAU</div>
                    </div>

                </div>
                <div class="zuo_bot">
                    <div class="bot_left">
                        <div style="margin-top: 15px;">
                            <span style="font-weight: bold; font-size: 18px;">24.93w</span>
                        </div>
                        <div style="margin-top: 10px;color: #B2B2B2;">今日DAU</div>
                    </div>
                    <div class="bot_right">
                        <div style="margin-top: 15px;">
                            <span style="font-weight: bold; font-size: 18px;">984.52w</span>
                        </div>
                        <div style="margin-top: 10px;color: #B2B2B2;">总用户数</div>

                    </div>
                </div>
            </div>

            <div class="right_you">
                <div class="you_top">

                    <div class="you_top_left">
                        <img src="@/assets/icon2.png">
                    </div>

                    <div class="you_top_right">
                        <div style="margin-top: 15px;">
                            <span style="font-weight: bold; font-size: 18px;">264.7w</span>
                            <span style=" font-weight: bold;color: #1EBD5E; margin-left: 5px;">29.74</span>
                        </div>
                        <div style="margin-top: 10px;color: #B2B2B2;">今日DAU</div>
                    </div>
                </div>

                <div class="you_bot">
                    <div class="bot_left">
                        <div style="margin-top: 15px;">
                            <span style="font-weight: bold; font-size: 18px;">84.52w</span>
                        </div>
                        <div style="margin-top: 10px;color: #B2B2B2;">GPS</div>
                    </div>
                    <div class="bot_right">
                        <div style="margin-top: 15px;">
                            <span style="font-weight: bold; font-size: 18px;">84.52w</span>
                        </div>
                        <div style="margin-top: 10px;color: #B2B2B2;">特权</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.main_letop {
    width: 100%;
    height: 174px;
    border-radius: 8px;
    display: flex;


    .top_left {
        width: 49%;
        border-radius: 7px;
        background: #2969FF;
        display: flex;

        .top_zuo {
            width: 40%;
            margin-top: 5px;
            margin-left: 5px;

        }

        .top_you {
            width: 270px;
            margin-top: 20px;

            .you_top {

                border-bottom: double #fff 1px;
            }

            .you_bot {
                display: flex;
                height: 50px;
                justify-content: space-between;
                margin-top: 10px;
            }
        }
    }


    .top_right {
        width: 50%;
        margin-left: 10px;
        display: flex;

        //左
        .right_zuo {
            width: 50%;
            height: 100%;
            background: #fff;
            border-radius: 5px;

            // 上
            .zuo_top {
                width: 100%;
                height: 80px;
                display: flex;

                .zuo_top_left {
                    width: 30%;
                    margin-top: 20px;
                    text-align: center;
                }
            }

            .zuo_bot {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-evenly;
            }
        }

        //右
        .right_you {
            margin-left: 10px;
            width: 50%;
            height: 100%;
            background: #fff;
            border-radius: 5px;

            .you_top {
                width: 100%;
                height: 80px;
                display: flex;

                .you_top_left {
                    width: 30%;
                    margin-top: 20px;
                    text-align: center;
                }
            }

            .you_bot {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-evenly;
            }
        }
    }
}
</style>